<template>
  <div class="input-component">
    <el-input
      :value="输入值"
      :type="类型"
      :placeholder="占位文本"
      :disabled="禁用"
      :clearable="可清空"
      :prefix-icon="前缀图标"
      :suffix-icon="后缀图标"
      :size="尺寸"
      :maxlength="最大长度"
      :show-word-limit="显示字数限制"
      @input="handleInput"
    ></el-input>
  </div>
</template>

<script>
export default {
  name: 'InputComponent',
  componentName: '输入框',
  icon: 'el-icon-edit',
  defaultProps: {
    输入值: '',
    类型: 'text',
    占位文本: '请输入内容',
    禁用: false,
    可清空: true,
    前缀图标: '',
    后缀图标: '',
    尺寸: 'medium',
    最大长度: -1,
    显示字数限制: false
  },
  props: {
    输入值: {
      type: String,
      default: ''
    },
    类型: {
      type: String,
      default: 'text',
      validator: value => {
        return ['text', 'textarea', 'number', 'password'].includes(value);
      }
    },
    占位文本: {
      type: String,
      default: '请输入内容'
    },
    禁用: {
      type: Boolean,
      default: false
    },
    可清空: {
      type: Boolean,
      default: true
    },
    前缀图标: {
      type: String,
      default: ''
    },
    后缀图标: {
      type: String,
      default: ''
    },
    尺寸: {
      type: String,
      default: 'medium',
      validator: value => {
        return ['medium', 'small', 'mini'].includes(value);
      }
    },
    最大长度: {
      type: Number,
      default: -1
    },
    显示字数限制: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleInput(val) {
      // 更新输入值并触发事件通知父组件
      this.$emit('update:输入值', val);
      this.$emit('input', val);
      console.log('Input value changed:', val);
    }
  }
};
</script>

<style scoped>
.input-component {
  width: 100%;
  margin: 5px 0;
}
</style>